<template>
  <div class="bordercontents" :ref="ref">
    <svg class="dv-border-svg-container" :width="width" :height="height * 2">
      <defs>
        <!-- 线性渐变 -->
        <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color: red; stop-opacity: 1" />
          <stop offset="100%" style="stop-color: #007fff; stop-opacity: 1" />
        </linearGradient>
        <filter id="filterId" height="150%" width="150%" x="-25%" y="-25%">
          <!-- 该滤镜用来侵蚀或扩张输入图像，主要用于在增肥或瘦身效果方面 -->
          <!-- in 可选值：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint -->
          <!-- radius 属性代表了 一个定给《feMorphology》滤镜上的操作，如果提供了两个<number>,则第一个数代表了x-radius,第二数代表了y-radius,如果只提供了一个数字，则值同时用于x和y。值是在filter元素的primitiveUnits 确定的坐标系统内 -->
          <feMorphology
            operator="dilate"
            radius="2"
            in="SourceAlpha"
            result="thicken"
          />
          <!-- 高斯模糊 -->
          <!-- in 标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint  -->
          <!-- stdDeviation 模糊量 -->
          <feGaussianBlur in="thicken" stdDeviation="3" result="blurred" />
          <!-- <feFlood>使用定义好的颜色flood-color和透明度flood-opacity填充了滤镜的分区 -->
          <!-- （x，y）、width、height定义了绘制矩形的范围， flood-color（探照灯 或 泛滥）颜色 flood-opacity （探照灯 或 泛滥）透明度 -->
          <feFlood flood-color="rgba(8, 230, 238, 0.63)" result="glowColor" />

          <!-- <feBlend> 将一个特定混合模式将两个对象组合到一起，类似合并图层 in、in2 标识为给定的滤镜原始输入 -->
          <!-- mode 混合模式：normal | multiply | screen | darken | lighten -->
          <!-- feComposite 该路径执行两个输入图像的智能像素组合，在图像空间中使用合成操作之一：over,in,atop,xor -->
          <feComposite
            in="glowColor"
            in2="blurred"
            operator="in"
            result="softGlowColored"
          />
          <!-- feMerge 滤镜允许同时应用滤镜效果而不是按顺序应用滤镜，利用result储存别的路径的输触可以实现这条一点，然后在一个<feMeergeNode>子元素中访问他 -->
          <feMerge>
            <feMergeNode in="softGlowColored" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <polyline
        class="dv-bb7-line-width-2"
        :points="`${width - (width - 50)},${height - (height - 30)} ${
          width - (width - 10)
        },${height - (height - 15)} 0, 0`"
        style="fill: none; stroke-opacity: 0.5"
      />
      <polyline
        fill="transparent"
        stroke="#2feefb"
        stroke-width="2"
        :points="`${width - (width - 50)},${height - (height - 40)} ${
          width - (width - 10)
        },${height - (height - 25)} 0, 10`"
      ></polyline>
      <!-- 左边 -->
      <polyline
        class="dv-bb7-line-width-2"
        :points="`${width},0 ${width - 10} ,${height - (height - 15)} ${
          width - 50
        },${height - (height - 30)}`"
        style="fill: none; stroke-opacity: 0.5"
      />
      <polyline
        fill="transparent"
        stroke="#2feefb"
        stroke-width="2"
        :points="`${width + 10},0 ${width - 10},${height - (height - 25)} ${
          width - 50
        },${height - (height - 40)}`"
      >
        <!-- Animate -->
        <!-- attributeName:需要变化的元素名称   -->
        <!-- attributeType: "CSS | XML | auto" ,即将变化的属性是哪一类 -->
        <!-- from 动画起始值 -->
        <!-- to 动画结束值 -->
        <!-- by 动画值相对结束值 -->
        <!-- values 多个变化值 -->
        <!-- begin 动画开始时间 -->
        <!-- end 动画结束时间 -->
        <!-- dur 动画时间长度 -->
        <!-- repeatCount 动画执行次数:6|indefinite -->
        <!-- <animate
          attributeName="stroke-dasharray"
          attributeType="XML"
          from="0,0,10,0"
          to="0,0,150,50"
          dur="2s"
          begin="0s"
          calcMode="spline"
          keyTimes="0;1"
          keySplines=".4,1,0.49,0.98"
          repeatCount="indefinite"
        /> -->
      </polyline>
    </svg>
    <div class="echartCon">
      <div>
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script>
import autoMinix from "../autoResize";
import { defineComponent, toRaw } from "vue-demi";
export default defineComponent({
  name: "vtitleline1",
  mixins: [autoMinix],
  data(){
     return {
       ref:'vtitleline1',
     }
  },
  setup() {
    let ref = toRaw("vtitleline1");
    return {
      ref,
    };
  },
});
</script>

<style lang="less" scoped>
.dv-border-svg-container > polyline {
  stroke-linecap: round;
}
.dv-bb7-line-width-2 {
  stroke-width: 2;
  stroke: #2feefb;
}
.dv-bb7-line-width-3 {
  stroke-width: 2;
  stroke: #2feefb;
}
.bordercontents {
  position: relative;
  width: 100%;
  height: 100%;
}
.dv-border-svg-container {
  position: absolute;
  top: 0;
  left: 0;
}
.echartCon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0.3rem 0.3rem;
  box-sizing: border-box;
}
.echartCon > div {
  width: 100%;
  height: 100%;
  text-align: center;
  color: #2feefb;
  font-size: 1.2rem;
}
</style>